<template>
	<view class="container">
		<!-- 自定义导航栏 -->
		<u-navbar leftIconSize="0" title="个人中心" safeAreaInsetTop placeholder bgColor="#f1f1f1"></u-navbar>
		<view class="header">
			<u-avatar class="avatar" size="60" :src="userInfo.avatar" @click="previewImage"></u-avatar>
			<view class="header-right">
				<view class="username">
					{{userInfo.nickName?userInfo.nickName:'未设置昵称'}}
					<u-icon v-if="userInfo.userSex == 2" color="#EC768F" name="woman"></u-icon>
					<u-icon v-if="userInfo.userSex == 1" color="#E59B60" name="man"></u-icon>
				</view>
			</view>
		</view>
		<view class="info">
			<u-cell-group :customStyle="myGroup">
				<u-cell border center size="large" icon="setting" title="个人设置" isLink url="/pages/userCenter/setUserInfo"></u-cell>
				<!-- #ifdef APP || APP-PLUS || APP-NVUE -->
				<u-cell border center size="large" icon="lock" title="修改密码" isLink url="/pages/userCenter/changePwd"></u-cell>
				<!-- #endif -->
				<!-- <u-cell border center size="large" icon="/static/icon/about.png" title="关于我们" isLink url="/pages/userCenter/about"></u-cell>
					
				<u-cell border center size="large" icon="/static/icon/feedback.png" title="反馈" isLink url="/pages/userCenter/feedback"></u-cell> -->
					
				<!-- #ifdef APP || APP-PLUS || APP-NVUE -->
				<u-cell border center size="large" icon="info-circle" title="APP版本" :value="appVersion" center
					@click="updateApp"></u-cell>
				<!-- #endif -->
			</u-cell-group>
		</view>

		<!-- #ifdef APP || APP-PLUS || APP-NVUE -->
		<view class="foot">
			<view class="yangsf-ratio-w-80">
				<u-button shape="circle" type="info" text="退出登录" @click="toLogout"></u-button>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		getUserInfo,
		logout,
		checkAppVersion
	} from 'config/api.js';
	export default {
		data() {
			return {
				isLogin: this.$store.state.isLogin,
				userInfo: this.$store.state.userInfo,
				appVersion: this.$store.state.appVersion,
				myGroup: {
					fontSize: '16px'
				}
			}
		},
		onLoad() {
			this.getUser();
		},
		onPullDownRefresh() {
			this.getUser();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			previewImage() {
				if (this.userInfo.avatar) {
					uni.previewImage({
						current: this.userInfo.avatar,
						urls: [this.userInfo.avatar],
						longPressActions: {

						}
					})
				}
			},
			getUser() {
				//模拟请求API接口，获取用户信息
				getUserInfo({}).then((res) => {
					this.userInfo = res.data
					this.$store.commit('setUserInfo', res.data);
				})
			},
			toLogout() {
				logout().then((res) => {}).catch((res) => {});
				this.$store.commit('setLogout', '');
				uni.$u.route({
					url: '/pages/userCenter/userLogin',
					type: 'reLaunch'
				});
			},
			updateApp(){
				app.check(uni.$u.os())
			}

		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 20vh;
		background-color: #f1f1f1;
	}

	.header-right {
		margin-left: 20rpx;
	}

	.username {
		display: flex;
		font-size: 24px;
		color: #000000;
	}

	.info {
		background-color: #fff;
	}

	.item {
		display: flex;
		margin-bottom: 10px;
	}

	.label {
		flex: 1;
		color: #888;
	}

	.value {
		flex: 2;
	}

	.foot {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20vh;
	}
	
	.mykefu{
		display: flex;
	}
	
	.myContactText{
		font-size: 16px;
		/* line-height: 22px; */
		margin-left: 4px;
		width: 100px;
	}
	
	.myContactBtn{
		border-style: none
	}
</style>